<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" id="begin" value="start">
    <input type="button" id="end" value="end">
    <input type="button" id="once" value="run only once">
    <input type="button" id="stop" value="stop only once">
    <div id="number">0</div>
    <script>
        let interva, timeout; //用于存放定时器
        document.getElementById("once").onclick = function() {
            // setTimeout(执行的函数，间隔时间)  仅执行一次  通过标识清除
            timeout = setTimeout(() => {
                number.innerHTML = parseInt(number.innerHTML) + 1;
            }, 10000);
        }
        document.getElementById("stop").onclick = function() {
            // 点击结束后，将开始按钮的禁用设为false
            document.getElementById("once").disabled = false;
            // 清除指定的timeout定时器（标记）
            clearInterval(timeout);
        }
        document.getElementById("begin").onclick = function() {
            // disabled= true 禁用开始
            this.disabled = true;
            let number = document.getElementById("number");
            // setInterval(执行的函数，间隔时间（单位毫秒   1000毫秒=1秒）)
            interval = setInterval(() => {
                number.innerHTML = parseInt(number.innerHTML) + 1;
            }, 1000);
            number.innerHTML = parseInt(number.innerHTML) + 1;

        }
        document.getElementById("end").onclick = function() {
            // 点击结束后，将开始按钮的禁用设为false
            document.getElementById("begin").disabled = false;
            // 清除指定的定时器（标记）
            clearInterval(interval);
        }
    </script>
</body>

</html>